<template>
	<div class="role" v-if="dialogFormVisible">
		<el-dialog :title="title" :visible="dialogFormVisible" :close-on-click-modal="false" width="900px" top="5vh" :before-close="handleClose" append-to-body>
			<div class="step">
				<el-steps :active="num">
					<el-step title="创建订单" icon="el-icon-edit"></el-step>
					<el-step title="导入用例" icon="el-icon-printer"></el-step>
					<el-step title="创建成功" icon="el-icon-check"></el-step>
				</el-steps>
			</div>
			<el-divider></el-divider>
			<div class="tab" v-if="num == 1">
				<el-form ref="form" :rules="rules" :model="form" label-width="100px">
					<el-form-item label="产品名称" prop="product_name">
						<el-input v-model="form.product_name" placeholder="请输入产品名称"></el-input>
					</el-form-item>
					<el-form-item label="MODEL" prop="project_name">
						<el-input v-model="form.project_name" placeholder="请输入MODEL"></el-input>
					</el-form-item>
					<el-form-item label="里程碑" prop="milepost">
						<el-select v-model="form.milepost" placeholder="请选择里程碑" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in milepostOptions"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="客户属性" prop="customer_type">
						<el-select v-model="form.customer_type" placeholder="请选择客户属性" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in options"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="客户" prop="customer">
						<el-select v-model="form.customer" placeholder="请选择客户" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in customerOptions"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="产品线" prop="product_line">
						<el-select v-model="form.product_line" placeholder="请选择产品线" style="width:100%;" @change="productLine" :disabled="num == 3">
							<el-option
								v-for="item in productLineOptions"
								:key="item.index"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="产品品类" prop="product">
						<el-select v-model="form.product" placeholder="请选择产品" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in productOptions"
								:key="item.index"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="测试组" prop="group_id">
						<el-select v-model="form.group_id" placeholder="请选择测试组" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in groupOptions"
								:key="item.index"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="品牌属性" >
						<el-select v-model="form.brand_type" placeholder="请选择品牌属性" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in brandTypeoptions"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="联网方式">
						<el-select v-model="form.networking_mode" placeholder="请选择联网方式" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in networkingModeoptions"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="测试内容">
						<el-select
							v-model="form.test_content"
							placeholder="请选择测试内容"
							multiple
							style="width:100%;"
							:disabled="num == 3">
							<el-option
								v-for="(item,index) in testOption"
								:key="index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="测试服务器">
						<el-input v-model="form.server" :disabled="true" placeholder="请输入测试服务器"></el-input>
					</el-form-item>
					<el-form-item label="销售区域" >
						<el-select
							v-model="form.sales_area"
							@change="areaChange"
							placeholder="请选择销售区域"
							filterable
							style="width:100%;"
							:disabled="num == 3">
							<el-option
								v-for="(item,index) in salesOption"
								:key="index"
								:label="item.name+'-'+'('+item.server+')'"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="样机" >
						<el-select
							v-model="form.prototype"
							placeholder="请选择样机"
							multiple
							style="width:100%;"
							:disabled="num == 3">
							<el-option
								v-for="(item,index) in prototypeOption"
								:key="index"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="计划提测时间">
						<el-date-picker
							v-model="serverTime"
							type="datetimerange"
							:picker-options="pickerOptions"
							range-separator="至"
							start-placeholder="计划开始提测时间"
							end-placeholder="计划结束提测时间"
							style="width: 100%;"
							@change="dataChange"
							align="right">
						</el-date-picker>
					</el-form-item>
				</el-form>
			</div>
			<div v-if="num == 2">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="IoT产品通用" name="first">
						<div class="file">
							<div class="file-item">
								<div class="item">
									<el-upload
										class="upload-demo"
										action="string"
										:headers="headers"
										:http-request="uploadFile"
										:on-remove="deleteFile"
										:before-upload="beforeUpload">
										<el-button size="small" type="primary">导入用例</el-button>
									</el-upload>
								</div>
							</div>
							<div class="file-item">
								<div class="item">
									<el-button type="success" size="small">
										<a :href="href" style="color: #fff;">下载模板</a>
									</el-button>
								</div>
								<div class="item">
									<el-popover
										placement="top"
										width="160"
										v-model="visible">
										<p>确定批量删除吗？</p>
										<div style="text-align: right; margin: 0">
											<el-button size="mini" type="text" @click="visible = false">取消</el-button>
											<el-button type="primary" size="mini" @click="delCase">确定</el-button>
										</div>
										<el-button type="success" size="small" :disabled="delBtn"  slot="reference">批量删除</el-button>
									</el-popover>
								</div>
							</div>


						</div>
						<div class="testCase">
							<div>IoT产品通用用例列表</div>
							<el-table
								v-if="initTableList"
								class="marT"
								:data="initTableList"
								:border="true"
								:header-cell-style="{background:'#eef1f6'}"
								lazy
								@selection-change="handleSelectionChange"
								row-key="id">
								<el-table-column
									type="selection"
									width="55">
								</el-table-column>
								<el-table-column align="center" type="index" label="序号" width="50">
								</el-table-column>
								<el-table-column align="center" property="case_name" label="用例标题" width="300"></el-table-column>
								<el-table-column align="center" property="priority" label="优先级"></el-table-column>
								<el-table-column align="center" property="test_type" label="测试类型"></el-table-column>
								<el-table-column align="center" label="操作">
									<template slot-scope="scope">
								<span>
									<template>
										<el-popconfirm title="确认删除吗？" @confirm="del(scope.row)">
											<span slot="reference" class="del">删除</span>
										</el-popconfirm>
									</template>
								</span>
										<span><a > | </a></span>
										<span><a @click="edit(scope.row)" >修改</a></span>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-tab-pane>
					<el-tab-pane label="品类通用" name="second">
						<div class="file">
							<div class="file-item">
								<div class="item">
									<el-upload
										class="upload-demo"
										action="string"
										:headers="headers"
										:http-request="uploadFile"
										:on-remove="deleteFile"
										:before-upload="beforeUpload">
										<el-button size="small" type="primary">导入用例</el-button>
									</el-upload>
								</div>
							</div>
							<div class="file-item">
								<div class="item">
									<el-button type="success" size="small">
										<a :href="href" style="color: #fff;">下载模板</a>
									</el-button>
								</div>
								<div class="item">
									<el-popover
										placement="top"
										width="160"
										v-model="commonvisible">
										<p>确定批量删除吗？</p>
										<div style="text-align: right; margin: 0">
											<el-button size="mini" type="text" @click="commonvisible = false">取消</el-button>
											<el-button type="primary" size="mini" @click="delCase">确定</el-button>
										</div>
										<el-button type="success" size="small" :disabled="delBtn"  slot="reference">批量删除</el-button>
									</el-popover>
								</div>
							</div>
						</div>
						<div class="testCase">
							<div>品类通用用例列表</div>
							<el-table
								v-if="commonList"
								class="marT"
								:data="commonList"
								:border="true"
								:header-cell-style="{background:'#eef1f6'}"
								lazy
								@selection-change="handleSelectionChange"
								row-key="id">
								<el-table-column
									type="selection"
									width="55">
								</el-table-column>
								<el-table-column align="center" type="index" label="序号" width="50">
								</el-table-column>
								<el-table-column align="center" property="case_name" label="用例标题" width="300"></el-table-column>
								<el-table-column align="center" property="priority" label="优先级"></el-table-column>
								<el-table-column align="center" property="test_type" label="测试类型"></el-table-column>
								<el-table-column align="center" label="操作">
									<template slot-scope="scope">
								<span>
									<template>
										<el-popconfirm title="确认删除吗？" @confirm="del(scope.row)">
											<span slot="reference" class="del">删除</span>
										</el-popconfirm>
									</template>
								</span>
										<span><a > | </a></span>
										<span><a @click="edit(scope.row)" >修改</a></span>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-tab-pane>
					<el-tab-pane label="品类特有" name="third">
						<div class="file">
							<div class="file-item">
								<div class="item">
									<el-upload
										class="upload-demo"
										action="string"
										:headers="headers"
										:http-request="uploadFile"
										:on-remove="deleteFile"
										:before-upload="beforeUpload">
										<el-button size="small" type="primary">导入用例</el-button>
									</el-upload>
								</div>
							</div>
							<div class="file-item">
								<div class="item">
									<el-button type="success" size="small">
										<a :href="href" style="color: #fff;">下载模板</a>
									</el-button>
								</div>
								<div class="item">
									<el-popover
										placement="top"
										width="160"
										v-model="specificvisible">
										<p>确定批量删除吗？</p>
										<div style="text-align: right; margin: 0">
											<el-button size="mini" type="text" @click="specificvisible = false">取消</el-button>
											<el-button type="primary" size="mini" @click="delCase">确定</el-button>
										</div>
										<el-button type="success" size="small" :disabled="delBtn" slot="reference">批量删除</el-button>
									</el-popover>
								</div>
							</div>


						</div>
						<div class="testCase">
							<div>品类特有用例列表</div>
							<el-table
								v-if="specificList"
								class="marT"
								:data="specificList"
								:border="true"
								:header-cell-style="{background:'#eef1f6'}"
								lazy
								@selection-change="handleSelectionChange"
								row-key="id">
								<el-table-column
									type="selection"
									width="55">
								</el-table-column>
								<el-table-column align="center" type="index" label="序号" width="50">
								</el-table-column>
								<el-table-column align="center" property="case_name" label="用例标题" width="300"></el-table-column>
								<el-table-column align="center" property="priority" label="优先级"></el-table-column>
								<el-table-column align="center" property="test_type" label="测试类型"></el-table-column>
								<el-table-column align="center" label="操作">
									<template slot-scope="scope">
								<span>
									<template>
										<el-popconfirm title="确认删除吗？" @confirm="del(scope.row)">
											<span slot="reference" class="del">删除</span>
										</el-popconfirm>
									</template>
								</span>
										<span><a > | </a></span>
										<span><a @click="edit(scope.row)" >修改</a></span>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
			<div v-if="num == 3">
				创建成功
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="add('form')" v-if="num != 3">下一步</el-button>
				<el-button type="primary" @click="save" v-else>提 交</el-button>
			</div>
		</el-dialog>
		<testCaseEdit ref="testCaseEdit"></testCaseEdit>
	</div>
</template>

<script>
import { getHeader } from '@/app.config'
import {orderOptions,productList,manufactorList,productLineList,
	groupList,orderSure,caseTemplate,orderCase, prototypeList,orderIdCase,orderMult} from '@/api/user'
import testCaseEdit from "./testCaseEdit";
export default {
	name: 'addForm',
	components:{
		testCaseEdit
	},
	data(){
		return {
			commonType:'iot_common',
			activeName:'first',
			serverTime:'',
			href:'',
			headers:{'Content-Type':'multipart/form-data'},
			dialogFormVisible:false,
			form:{},
			id:'',
			rules:{
				product_name:[
					{max: 100, message: '产品名称不能超过100个字符', trigger: 'blur'},
					{required: true, message: '请输入产品名称', trigger: 'blur' }
					],
				project_name:[
					{max: 50, message: 'MODEL不能超过50个字符', trigger: 'blur'},
					{required: false, message: '请输入MODEL', trigger: 'blur' }
					],
				milepost: [{ required: true, message: '请选择里程碑', trigger: 'change' }],
				customer_type:[{ required: true, message: '请选择客户类型', trigger: 'change' }],
				customer:[{ required: true, message: '请输入客户', trigger: 'blur' }],
				product_line:{ required: true, message: '请输入产品线', trigger: 'blur' },
				product:{ required: true, message: '请输入产品', trigger: 'change' },
				group_id:{ required: true, message: '请输入产品', trigger: 'blur' },
				test_content:[{ required: true, message: '请选择测试内容', trigger: 'change' }],
				sales_area:[{ required: true, message: '请选择销售区域', trigger: 'change' }]
			},
			pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
			options:{},
			num:1,
			dataId:'',
			title:'新增',
			optionsLeader:[],
			milepostOptions:[],
			testOption:[],
			productOptions:[],
			customerOptions:[],
			productLineOptions:[],
			groupOptions:[],

			initTableList:[], //  IoT产品通用用例列表
			commonList:[],    //  品类通用用例列表
			specificList:[],  //  品类特有用例列表

			commonvisible:false,
			specificvisible:false,

			salesOption:[],
			prototypeOption:[],
			serverOption:[],
			brandTypeoptions:[],
			networkingModeoptions:[],
			multipleSelection:[],
			delBtn:true,
			visible:false
		}
	},
	created() {
	},
	methods:{
		//切换用例标签页
		handleClick(){
			if(this.activeName == 'first'){
				this.commonType = 'iot_common'
			}
			if(this.activeName == 'second'){
				this.commonType = 'common'
			}if(this.activeName == 'third'){
				this.commonType = 'specific'
			}
		},
		// 服务器选择事件
		areaChange(e){
			this.salesOption.filter(item => {
				if(item['name'] == e){
					this.form.server = item['server']
				}
			})
		},
		// 删除用例
		del(data){
			orderCase(data.id).then(res => {
				if(res.status == 'success'){
					this.$message.success('删除成功！')
					orderIdCase(this.dataId).then(res => {
						this.initTableList = res.data
					})
				}else {
					this.$message.error('删除失败！')
				}
			})
		},
		// 全选用例
		handleSelectionChange(val) {
			let arr = []
			val.forEach(item => {
				arr.push(item.id)
			})
			this.multipleSelection = arr;
			if(arr.length > 0){
				this.delBtn = false
			}else {
				this.delBtn = true
			}
		},
		delCase(){
			var data = {
				case_ids:this.multipleSelection
			}
			orderMult(data).then(res => {
				if(res.status == 'success'){
					this.$message.success('删除成功！')
					this.getDetail()
					this.delBtn = true
					this.visible = false
					this.commonvisible = false
					this.specificvisible = false
				}else {
					this.$message.error('删除失败！')
				}
			})
		},
		// 修改用例
		edit(data){
			this.$refs.testCaseEdit.initTab(data)
		},
		deleteFile(file, fileList) {
			this.$message.success("成功移除!")
			this.form.guidance_doc.forEach((item,index) => {
				var arr = item.split('/')
				if(file.name == arr[arr.length-1] ){
					if(index != 0){
						this.form.guidance_doc.splice(index,index)
					}else {
						this.form.guidance_doc = []
					}
				}
			})
		},
		beforeUpload(file){
			var type = file.name
			type = type.split('.')[1]
		},
		// 获取用例详情
		getDetail(){
			let iot_common = []
			let common = []
			let specific = []
			orderIdCase(this.dataId).then(res => {
				res.data.forEach(item => {
					if(item.type == 'common'){
						common.push(item)
					}
					if(item.type == 'iot_common'){
						iot_common.push(item)
					}
					if(item.type == 'specific'){
						specific.push(item)
					}
				})
				this.initTableList = iot_common  //  IoT产品通用用例列表
				this.commonList = common    //  品类通用用例列表
				this.specificList = specific  //  品类特有用例列表
			})
		},
		//上传附件
		uploadFile(file) {
			let url= `${process.env.VUE_APP_KANBAN_HOST}/api/v1/order/${this.dataId}/import/case?type=${this.commonType}`
			// let url= `${process.env.VUE_APP_KANBAN_HOST}/api/v1/order/000075/import/case`
			let fd = new FormData();
			fd.append('file',file.file);
			this.$axios.post(url,fd,{headers: getHeader()})
				.then((response) => {
					if (response.data.status == 'success') {
						this.$message.success("上传成功!")
						this.getDetail()
					}
				}).catch((err) => {
				console.log(err);
			});
		},
		productLine(e){
			this.productOptions = []
			this.productLineOptions.filter(item => {
				let data = e
				productList(data).then(res => {
					this.productOptions = res.data
				})
			})
		},
		handleClose(){
			this.dialogFormVisible = false
			this.num = 1
			this.form = {}
			this.milepostOptions = []
			this.testOption = []
			this.productOptions = []
			this.customerOptions = []
			this.productLineOptions = []
			this.groupOptions = []
			this.initTableList = []
			this.salesOption = []
			this.prototypeOption = []
			this.serverOption = []
			this.brandTypeoptions = []
			this.networkingModeoptions = []
			this.delBtn = true
		},
		save(){

		},
		add(form){
			if(this.num == 1){
				this.$refs[form].validate((valid) => {
					if (valid) {
						var data = this.form
						console.log(data,121212)
						orderSure(data).then(res => {
							if(res.status == 'success'){
								this.form = {}
								this.milepostOptions = []
								this.testOption = []
								this.productOptions = []
								this.customerOptions = []
								this.productLineOptions = []
								this.groupOptions = []
								this.salesOption = []
								this.prototypeOption = []
								this.initTableList = []
								this.serverOption = []
								this.brandTypeoptions = []
								this.networkingModeoptions = []
								this.$message.success("创建订单成功！")
								this.num = 2
								this.dataId = res.data
							}else {
								this.$message.error(res.message)
							}
						})
					} else {
						return false;
					}
				});
			}
			if(this.num == 2){
				console.log(this.initTableList.length)
				if(this.initTableList.length == 0){
					this.$message.warning('请先导入用例！')
				} else {
					this.num = 3
				}
			}
			if(this.num == 3){
				this.$message.success("创建成功！")
				this.$parent.initTable()
				this.dialogFormVisible = false
				this.num = 1
				this.form = {}
				this.milepostOptions = []
				this.testOption = []
				this.productOptions = []
				this.customerOptions = []
				this.productLineOptions = []
				this.groupOptions = []
				this.salesOption = []
				this.prototypeOption = []
				this.serverOption = []
				this.brandTypeoptions = []
				this.networkingModeoptions = []
				this.initTableList = []
			}


		},
		dataChange(e){
			console.log(typeof (e),e[0],e[1],1212121)
			this.form.start_time = e[0]
			this.form.end_time = e[1]
		},
		initData(data){
			caseTemplate().then(res => {
				this.href = res.data
			})
			this.getDetail()
			orderOptions().then(res => {
				var data = res.data

				var source = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/manufactor/type`;
				this.$axios.get(source,{headers: getHeader()})
					.then((response) => {
						if (response.status == 200) {
							var res = response.data.data
							var arr = []
							res.forEach(item => {
								arr.push({name:item})
							})
							this.options = arr
						}
					}).catch((err) => {
					console.log(err);
				});

				prototypeList().then(res => {
					this.prototypeOption = res.data
				})

				manufactorList().then(res => {
					this.customerOptions = res.data
				})

				productLineList().then(res => {
					this.productLineOptions = res.data

				})

				productList().then(res => {
					var res = res.data
					var arr = []
					res.forEach(item => {
						arr.push({name:item['name']})
					})
					this.productOptions = arr
				})

				groupList().then(res => {
					this.groupOptions = res.data
				})

				data.mileposts.filter(item => {
					this.milepostOptions.push({name:item})
				})

				this.salesOption = data.sales_area_list

				data.test_content_list.filter(item => {
					this.testOption.push({name:item})
				})

				data.server_list.filter(item => {
					this.serverOption.push({name:item})
				})

				data.brand_type_list.filter(item => {
					this.brandTypeoptions.push({name:item})
				})

				data.networking_mode_list.filter(item => {
					this.networkingModeoptions.push({name:item})
				})
			})
		}
	}

}
</script>

<style lang="scss" scoped>
.role{

}
/deep/ .el-upload-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: none;
}
.step{
	margin: 10px 0;
}
.file{
	display: flex;
	justify-content: space-between;
}
.file .file-item:last-child{
	display: flex;
	.item:first-child{
		margin-right: 5px;
	}
}
.testCase{
	margin-top: 22px;
	border-top: 1px solid #eee;
	padding-top: 10px;
	height: 430px;
	overflow:scroll;
}
.del{
	color: #1890FF;
	cursor: pointer;
}

</style>
